<!-- 录音 -->
<template>
	<!-- @touchmove="getChmove" 移动事件 -->
	<view class="recording"  >
		<!-- 表层显示 -->
		<view v-if="!type2" class="show1" :style="{visibility: type?'hidden':'' ,}" @longpress="startRecord" @touchend="endRecord">
			<u-icon name="volume"></u-icon>
			<text class="text">按住说话</text>
		</view>

		<!-- 点击播放 -->
		<view v-else class="playBack" @click="playVoice">
			<view class="playBack-left">
				<u-icon name="volume" color="#fff"></u-icon>
				<text class="text" v-if="time">{{time + `''`}}</text>
			</view>
			<view class="playBack-del" @click.stop="clearAudio">
				<u-icon name="close" color="#fff" size="24rpx"></u-icon>
			</view>
		</view>


		<!-- 遮罩 -->
		<view class="pop" :style="{display: type?'block':'none',}">

			<!-- 半圆 -->
			<view class="pop-content"></view>

			<view class="icon">
				<u-icon name="volume" color="#999" size="60rpx"></u-icon>
			</view>

			<view class="gif">
				<image class="image" src="/static/images/voice.gif" mode=""></image>
			</view>


		</view>
	</view>
</template>

<script>
	// 录音管理
	const recorderManager = uni.getRecorderManager();
	// 创建audio对象
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true; // 是否自动播放
	
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	
	export default {
		name: "recording",
		props: {
			/**
			 * 完成录音返回录音文件
			 */
			submit: {
				type: Function,
				default: () => {}
			},
			
			/**
			 * 显示的
			 */
			previewData:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				type: false, // 是否开始录音


				type2: false, // 是否有录音了
				time: 0, // 录音多少秒
				timeId: null, // 定时器的id
				
				// 录音的地址
				voicePath: '',
				
				// 上传后的地址
				formData: '',
				
				
				
			};
		},
		
		watch:{
			previewData(){
				if(this.previewType){
					this.voicePath = this.previewData
					this.type2 = true
					this.$emit('submit',this.voicePath)
				}
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			
			/**
			 * 是否有回显的东西
			 */
			previewType(){
				return this.previewData !== ''
			}
			
		},
		
		mounted() {
			
			console.log(innerAudioContext, '这是啥');
			
			let that = this;
			recorderManager.onStop(function(res) {
				console.log('录音停止', res);
				that.voicePath = res.tempFilePath;
				
				that.uploadFilePromise(that.voicePath)
			});
			
			
			
			innerAudioContext.onEnded(res => {
				console.log('播放结束', res);
			})
			
			innerAudioContext.onPlay(res =>{
				console.log('获取时长',res);
				innerAudioContext.onTimeUpdate(res2=>{
					console.log(res2, 'res2');
				})
			})
		
		},
		methods: {
			
			
			
			/**
			 * 开始录音
			 */
			startRecord() {
				this.type = true
				recorderManager.start();
				// 录音时长
				this.time = 0;
				this.timeId = setInterval(() => {
					this.time++
				}, 1000)
				console.log('开始录音');
				
				
				
				
			},





			/**
			 * 关闭录音
			 */
			endRecord() {
				// 如果没有开始录音，那就不要执行
				if (!this.type || this.time < 1) {
					return this.$public.showText('录音时间太短，请重试')
				}
				this.type = false
				this.type2 = true
				recorderManager.stop();
				clearInterval(this.timeId)
				console.log('录音结束');
			},
			
			
			
			/**
			 * 播放录音
			 */
			playVoice() {
				console.log('播放录音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			
			
			/**
			 * 清空录音
			 */
			clearAudio(){
				this.type = false // 是否开始录音了
				this.type2 = false //是否有录音了
				this.voicePath = '' // 录音地址去掉
			},
			
			
			
			/**
			 * 上传
			 */
			async uploadFilePromise(url) {
				let data =	await new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$baseURL + 'api' + '/user/uploadImg', // 上传接口
						filePath: url,
						name: 'file',
						header: {
							'Authorization': `Bearer ${this.userInfo.loginToken}`
						},
						formData: {},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
						fail(err) {
							reject('错误')
						}
					});
				})
				
				this.formData = data
				this.$emit('submit',this.formData)
				
			},
			
			
			
			
			
			
			
			
			

			// /**
			//  * 手指移动位置
			//  */
			// getChmove(e) {
			// 	let item = e.touches[0]

			// 	// deleteType
			// 	let left1 = item.pageX >= this.domMsg.left
			// 	let left2 = item.pageX <= (this.domMsg.left + this.domMsg.box)
			// 	let top1 = item.pageY >= this.domMsg.top
			// 	let top2 = item.pageY <= (this.domMsg.top + this.domMsg.box)

			// 	console.log(left1, left2, top1, top2, '移动位置');

			// 	if (left1 && left2 && top1 && top2) {
			// 		this.deleteType = true
			// 	} else {
			// 		this.deleteType = false
			// 	}

			// }


			// /**
			//  * 获取节点信息
			//  */
			// getDomMsg() {
			// 	let that = this
			// 	const query = uni.createSelectorQuery().in(this);

			// 	query.select('.del').boundingClientRect(data => {
			// 		that.domMsg = {
			// 			top: data.top,
			// 			left: data.left,
			// 			box: data.width,
			// 		}
			// 		console.log("得到布局位置信息", data);
			// 	}).exec();
			// },



		}
	}
</script>

<style lang="less" scoped>
	.recording {
		#flex(-, -, -);

		.show1 {
			#box(-, 60rpx, 8rpx);
			#flex(-, -, center);
			#padding(0 24rpx);
			box-shadow: 0px 0px 8px 0px rgba(#000, 0.1);


			.text {
				#font(28rpx, #333);
				margin-left: 12rpx;
			}
		}



		.playBack {
			#flex(-, -, center);

			.playBack-left {
				#box(-, 60rpx, 8rpx, linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
				#flex(-, -, center);
				#padding(0 24rpx);

				.text {
					#font(28rpx, #fff);
					margin-left: 12rpx;
				}
			}

			.playBack-del {
				#box(40rpx, 40rpx, 50%, #fb5353);
				#flex(-, center, center);
				margin-left: 12rpx;
			}

		}




		.pop {
			#box(100vw, 100vh, 0, rgba(#000, .2));
			#position(fixed, 0, 0);
			z-index: 1000;


			.pop-content {
				#box(120vw, 60vw, 100%, #fff);
				text-align: center;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-bottom: -60vw;
				margin-left: -10vw;

				animation: content 1s ease-in-out;
				animation-fill-mode: forwards;

			}

			.icon {
				position: absolute;
				bottom: 60rpx;
				left: 50%;
				margin-left: -30rpx;
			}

			.gif {
				#box(258rpx, 142rpx);
				position: absolute;
				left: 50%;
				margin-left: -129rpx;
				top: 60%;
				// transition: opacity, 1, ease;

				animation: gif 0.5s ease-in-out;
				animation-fill-mode: forwards;


				.image {
					#box(258rpx, 142rpx);
				}


			}


			// .del {
			// 	#position(absolute, 70%, 15%);
			// 	#box(100rpx, 100rpx, 100%, rgba(#000, .6));
			// 	#flex(-, center, center);

			// }

		}
	}


	// 动画-半圆区域
	@keyframes content {
		from {
			background: rgba(#000, 0);
			left: 0px;
			top: 100vh;
		}


		to {
			background: linear-gradient(180deg, rgba(#e5e5e5, 1) 0%, rgba(#fff, 1) 50%, rgba(#fff, 1));
			left: 0;
			top: 85vh;
		}
	}

	@keyframes gif {
		from {
			opacity: 0.1;
		}

		to {
			opacity: 1;
		}
	}
</style>